<template>
	<view class="">
		<view class="container" v-if="data&& data.id">
			<!-- `status_up` 上架状态 1待发布 2发布中 3已下架' -->
			<view class="order-top" v-if="data.status == 1">
				<view class="t">
					待发布
				</view>
				<view class="p">
					报价审核通过后，会自动上架
				</view>
			</view>
			<view class="order-top" v-if="data.status == 2">
				<view class="t">
					发布中
				</view>
				<view class="p">
					<text>{{result.countdown}}</text>后自动下架
				</view>
			</view>
			<view class="order-top" v-if="data.status == 3">
				<view class="t">
					已下架
				</view>
				<view class="p">
					报价已自动下架，可再次提交上架
				</view>
			</view>
			<view class="goods" v-if="quotation && quotation.id">
				<view class="title">
					{{quotation.type==2?'我要出售':'我要收购'}}
				</view>
				<view class="img-con u-flex u-col-top u-row-between">
					<view class="img">
						<image :src=" quotation.image" mode="aspectFill" v-if="quotation.image"></image>
						<image src="@/static/img.png" class="no" mode="aspectFill" v-else></image>
					</view>
					<view class="con">
						<view class="name u-line-2">
							{{quotation.name}}
						</view>
						<view class="price" v-if="quotation.price">
							<text class="p"
								:class="{'p1':getPriceLength(quotation.price)<6,'p2':getPriceLength(quotation.price)==6,'p3':getPriceLength(quotation.price)==7,'p4':getPriceLength(quotation.price)==8,'p5':getPriceLength(quotation.price)>=9,}">{{$numToLocaleString(quotation.price)}}</text>
							<text class="y">MHB</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="l-title">
					联系信息
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						大区名称
					</view>
					<view class="r">
						{{quotation.game_zone_name}}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						角色ID
					</view>
					<view class="r">
						{{quotation.account}}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						微信号/手机号
					</view>
					<view class="r">
						{{quotation.wechat}}
					</view>
				</view>
			</view>
			<view class="list" v-if="data.up_time || data.down_time">
				<view class="item u-flex u-col-center u-row-between" v-if="data.up_time">
					<view class="l">
						上架时间
					</view>
					<view class="r" v-if="data.up_time">
						{{data.up_time|formatISODate }}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between" v-if="data.down_time">
					<view class="l">
						下架时间
					</view>
					<view class="r" v-if="data.down_time">
						{{data.down_time|formatISODate }}
					</view>
				</view>
			</view>
			<view class="list" v-if="data.refund_status == 1">
				<view class="l-title">
					退款信息
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						审核状态
					</view>
					<view class="r">
						审核失败
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						驳回原因
					</view>
					<view class="r">
						{{data.quotation.check_desc}}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						退款状态
					</view>
					<view class="r">
						已退款
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						退款金额
					</view>
					<view class="r">
						{{data.coin}}商人币
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						退款时间
					</view>
					<view class="r">
						{{data.quotation.check_time|formatISODate }}
					</view>
				</view>
			</view>
			<view class="list">
				<view class="l-title">
					支付信息
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						商人币
					</view>
					<view class="r">
						{{data.coin}}
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						上架天数
					</view>
					<view class="r">
						{{data.upday}}天
					</view>
				</view>
				<view class="item u-flex u-col-center u-row-between">
					<view class="l">
						支付时间
					</view>
					<view class="r">
						{{data.pay_time|formatISODate}}

					</view>
				</view>
			</view>
		</view>
		<view class="f-btns2 " v-if="data.status == 2">
			<view class="cont u-flex u-col-center u-row-right ">
				<view class="btn1" @click="open">
					改价
				</view>
				<view class="btn1" @click="down">
					下架
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="m-pop2">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close"></uni-icons>
				<view class="t">
					商品改价
				</view>
				<view class="m-item u-flex u-col-center u-row-between">
					<view class="l">
						原价<text>(MHB)</text>
					</view>
					<view class="r price" v-if="quotation.price">
						<text class="p"
							:class="{'p1':getPriceLength(quotation.price)<6,'p2':getPriceLength(quotation.price)==6,'p3':getPriceLength(quotation.price)==7,'p4':getPriceLength(quotation.price)==8,'p5':getPriceLength(quotation.price)>=9,}">{{$numToLocaleString(quotation.price)}}</text>

						<text class="y">MHB</text>
					</view>
				</view>
				<view class="m-item u-flex u-col-center u-row-between">
					<view class="l">
						改价<text>(MHB)</text>
					</view>
					<view class="r">
						<input maxlength="9" v-model="number" type="number" placeholder="请输入"
							placeholder-style="font-size: 28rpx;color: #D1D1D6;" />
						<view class="big">
							{{getBig(number)}}
						</view>
					</view>
				</view>
				<view class="btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="close">
						取消
					</view>
					<view class="btn btn2" @click="quotationPrice">
						确认改价
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUpList,
		downQuotationList,
		infoupDetail,
		quotationPrice
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				index: 3,
				show: false,
				number: '',
				id: "",
				quotation: {},
				data: {},
				setInterval: null,
				result: {
					offShelfDate: "",
					countdown: ""
				}
			}
		},
		onLoad(o) {
			this.id = o.id
			this.getData()
		},
		onUnload() {
			if (this.setInterval) {
				clearInterval(this.setInterval);
				this.setInterval = null;
			}
		},
		computed: {
			getPriceLength() {
				return (data) => {
					if (!data) return 1

					function getDigitCount(num) {
						if (num === 0) return 1;

						num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
						return Math.floor(Math.log10(num)) + 1;
					}
					let l = getDigitCount(data)
					return l

				}
			},
			getBig() {
				return (data) => {
					if (data) {
						return numberToChinese(data)
					} else {
						return ''
					}

					function numberToChinese(num) {
						// 限制范围：0到999999999
						if (num < 0 || num > 999999999) return '超出范围';

						// 定义中文数字和单位
						const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
						const units = ['', '十', '百', '千']; // 个级单位
						const bigUnits = ['', '万', '亿']; // 大单位：个、万、亿

						// 处理0的情况
						if (num === 0) {
							return '两整';
						}

						// 转换为整数并补零到9位（亿级1位+万级4位+个级4位）
						const str = Math.floor(num).toString().padStart(9, '0');
						// 拆分三级：亿级(0-0)、万级(1-4)、个级(5-8)
						const levels = [
							str.slice(0, 1), // 亿级
							str.slice(1, 5), // 万级
							str.slice(5, 9) // 个级
						];

						let result = '';

						// 处理每一级
						levels.forEach((level, index) => {
							if (level === '0000' && index !== 0) return; // 跳过空的万级和个级

							let levelStr = '';
							// 处理当前级的每一位
							for (let i = 0; i < level.length; i++) {
								const digit = parseInt(level[i]);
								if (digit !== 0) {
									levelStr += digits[digit] + units[level.length - 1 - i];
								} else {
									// 只在非末尾且前一位不是零的情况下加零
									if (i !== level.length - 1 && levelStr[levelStr.length - 1] !== '零') {
										levelStr += '零';
									}
								}
							}

							// 去除当前级末尾的零
							levelStr = levelStr.replace(/零+$/, '');

							// 如果当前级有内容，添加对应的大单位（万、亿）
							if (levelStr) {
								result += levelStr + bigUnits[2 - index];
							}
						});

						// 处理连续的零
						result = result.replace(/零+/g, '零');
						// 去除可能的开头或结尾零
						result = result.replace(/^零+|零+$/g, '');

						// 添加金额单位
						return result + '两整';
					}

				}
			}
		},
		methods: {
			quotationPrice() {
				if (!this.number) {
					this.$modal.msg('请输入金额')
					return
				}
				if (this.number.length > 9) {
					this.$modal.msg('金额过大')
					return
				}
				quotationPrice({
					id: this.data.quotation.id,
					price: parseInt(this.number),
					game_zone_name: this.data.quotation.game_zone_name,
					account: this.data.quotation.account,
					wechat: this.data.quotation.wechat
				}).then(res => {
					if (res.code == 200) {
						this.$modal.msg('修改成功')
						this.number = ''
						this.close()
						this.getData()
					}
				})
			},
			down(id) {
				this.$modal.confirm('是否要下架当前报价信息？', '下架提示').then(() => {
						return downQuotationList(this.quotation.id)
					}).then(() => {
						this.$modal.msg('下架成功')
						this.getData()
					})
					.catch(() => {})
			},
			getData() {
				infoupDetail(this.id).then(res => {
					if (res.code == 200) {
						this.data = res.data
						this.quotation = res.data.quotation
						let up_time = res.data.up_time
						let upday = res.data.upday
						if (up_time && res.data.status == 2) {
							this.setInterval = setInterval(() => {
								this.result = this.calculateOffShelfTime(up_time, upday);
							}, 1000)
						}
						this.data.down_time = res.data.down_time || (up_time ? this.getDownTime(up_time, upday) :
							null)
					}
				})
			},
			getDownTime(onShelfDateStr, shelfDays) {
				// 将上架时间字符串转为 Date 对象
				const onShelfDate = new Date(onShelfDateStr);

				// 计算下架时间（上架时间 + 上架天数）
				const date = new Date(onShelfDate);
				date.setDate(date.getDate() + parseInt(shelfDays));

				const year = String(date.getFullYear()).padStart(4, '0');
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

			},
			calculateOffShelfTime(onShelfDateStr, shelfDays) {
				function padZero(num) {
					return num < 10 ? '0' + num : num;
				}
				// 将上架时间字符串转为 Date 对象
				const onShelfDate = new Date(onShelfDateStr);

				// 计算下架时间（上架时间 + 上架天数）
				const offShelfDate = new Date(onShelfDate);
				offShelfDate.setDate(offShelfDate.getDate() + parseInt(shelfDays));

				// 获取当前时间
				const now = new Date();

				// 计算倒计时（毫秒差）
				let timeDiff = offShelfDate - now;

				if (timeDiff <= 0) {
					return {
						offShelfDate: offShelfDate.toLocaleString(),
						countdown: "已下架"
					};
				}

				// 转换为天、小时、分钟、秒
				const seconds = padZero(Math.floor((timeDiff / 1000) % 60));
				const minutes = padZero(Math.floor((timeDiff / 1000 / 60) % 60));
				const hours = padZero(Math.floor((timeDiff / (1000 * 60 * 60)) % 24));
				const days = padZero(Math.floor(timeDiff / (1000 * 60 * 60 * 24)));
				const countdownStr = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
				return {
					offShelfDate: offShelfDate.toLocaleString(), // 下架时间
					countdown: countdownStr // 倒计时
				};
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #FF6F07;

	.f-btns2 {
		width: 750rpx;
		min-height: 140rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		box-sizing: border-box;

		.cont {
			width: 710rpx;
			margin: 0rpx auto;
			height: 140rpx;
			box-sizing: border-box;
		}

		.btn1 {
			width: 180rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 2rpx solid #D5D5D5;
			color: #11192D;
			font-size: 30rpx;
			text-align: center;
			margin-left: 20rpx;
		}
	}

	.m-pop2 {
		width: 620rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		box-sizing: border-box;
		padding: 40rpx 30rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;

		.icons {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.t {
			line-height: 44rpx;
			height: 44rpx;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
			font-weight: 600;
		}

		.m-item {
			width: 100%;
			padding: 10rpx 0;
			margin-top: 20rpx;

			.l {
				font-size: 32rpx;
				color: #000000;
				width: 160rpx;

				text {
					font-size: 20rpx;
					margin-left: 5rpx;
				}
			}

			.r {
				flex: 1;
				width: 1rpx;
				text-align: right;
				margin-left: 20rpx;
				position: relative;

				input {
					width: 100%;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #D1D1D6;
					line-height: 68px;
					font-size: 28rpx;
					color: #11192D;
					padding: 0 20rpx;
					box-sizing: border-box;
					position: relative;
				}

				.big {

					position: absolute;
					top: 70rpx;
					right: 0;
					line-height: 40rpx;
					height: 40rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					text-align: right;
				}
			}

			.price {
				height: 50rpx;
				line-height: 50rpx;

				.p {
					font-family: "DIN";
					font-weight: bold;
					font-size: 36rpx;
					text-align: left;

				}

				.p5 {
					color: #FF70A4;
				}

				.p4 {
					color: #840FFB;
				}

				.p3 {
					color: #FE1515;
				}

				.p2 {
					color: #1EC742;
				}

				.p1 {
					color: #11192D;
				}

				.y {
					color: #979797;
					font-size: 20rpx;
					margin-left: 10rpx;
					font-weight: 400;
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}

		.p {
			margin-top: 60rpx;
			line-height: 44rpx;
			height: 44rpx;
			font-size: 32rpx;
			color: #000000;
			text-align: center;

			text {
				color: @color;
			}
		}

		.btns {
			width: 100%;
			margin-top: 50rpx;

			.btn {
				text-align: center;
				font-size: 32rpx;
				width: calc(50% - 10rpx);
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
			}

			.btn1 {

				background: #F9F9F9;
				color: #D1CDCD;
			}

			.btn2 {
				color: #fff;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

			}
		}
	}

	.container {
		padding: 30rpx 30rpx 160rpx;

		.l-title {
			font-size: 32rpx;
			color: #11192D;
			height: 60rpx;
			line-height: 60rpx;
		}





		.f-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx;
			background-color: #fff;
			z-index: 999;

			.btn1 {
				width: 180rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #D5D5D5;
				color: #11192D;
				font-size: 30rpx;
				text-align: center;
			}

			.btn2 {
				width: 480rpx;
				height: 100rpx;
				font-size: 30rpx;
				text-align: center;
				color: #fff;
				line-height: 100rpx;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
				border-radius: 20rpx;
			}
		}

		.list {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 10rpx 30rpx;
			border-radius: 20rpx;

			.item {
				padding: 15rpx 0;

				.l {
					font-size: 28rpx;
					color: #979797;
					height: 40rpx;
					line-height: 40rpx;
				}

				.r {
					flex: 1;
					width: 1rpx;
					font-size: 28rpx;
					color: #000000;
					text-align: right;
				}
			}
		}

		.goods {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.title {
				font-size: 32rpx;
				color: #11192D;
				height: 40rpx;
				line-height: 40rpx;
			}

			.img-con {
				margin-top: 20rpx;

				.img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 20rpx;
					overflow: hidden;
					background-color: #F8F8F8;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;

					image {
						width: 100%;
						height: 100%;
					}

					.no {
						width: 96rpx;
						height: 96rpx;
					}
				}

				.con {
					flex: 1;
					width: 1rpx;
					margin-left: 20rpx;

					.name {
						color: #11192D;
						font-size: 30rpx;
						line-height: 40rpx;
					}

					.price {
						margin-top: 10rpx;
						height: 50rpx;
						line-height: 50rpx;

						.p {
							font-family: "DIN";
							font-weight: bold;
							font-size: 36rpx;
							text-align: left;

						}

						.p5 {
							color: #FF70A4;
						}

						.p4 {
							color: #840FFB;
						}

						.p3 {
							color: #FE1515;
						}

						.p2 {
							color: #1EC742;
						}

						.p1 {
							color: #11192D;
						}

						.y {
							color: #979797;
							font-size: 20rpx;
							margin-left: 10rpx;
							font-weight: 400;
							height: 50rpx;
							line-height: 50rpx;
						}
					}
				}
			}
		}

		.record {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin: 20rpx auto;

			.l {
				height: 40rpx;
				line-height: 40rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-left: 10rpx;
					color: #11192D;
					font-size: 28rpx;
				}
			}

			.r {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.order-top {
			text-align: center;

			.t {

				height: 60rpx;
				line-height: 60rpx;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				text-align: center;

			}

			.p {
				margin-top: 10rpx;
				line-height: 40rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #8E8E8E;
				text-align: center;

				text {
					color: #FF6F07;
				}

			}
		}
	}
</style>